<template>
  <!-- 表单验证
       前置条件：表单元素值都v-model绑定了
          基本表单验证
             el-form
                 model:整个表单元素的值
                 rules:规则
              el-form-item
                 prop:对应表单元素的字段名
          全局表单验证
             el-form  ref='form'
             this.$refs.form.validate((result)=>{
              result:true:验证难过  false:验证失败
             })

          局部表单验证
          自定义表单验证

     登录：调用接口拿到tokdn存储
        1：定义登录接口api
        2:导入api
        3:点击登录在表单验证通过后调用
        4：调用成功
           拿到token存储到vuex
 -->
  <div class="login">
    <el-form ref="form" class="box" :model="form" :rules="rules">
      <img class="logo" src="@/assets/common/login-logo.png" alt="">
      <el-form-item prop="mobile">
        <el-input v-model="form.mobile" prefix-icon="el-icon-user-solid" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          prefix-icon="el-icon-lock"
          show-password
          @keyup.enter.native="submit"
        />
        <!-- 父子传值
                   子组件标签  @子组件方法名="事件"
                   子组件内  this.$emit('子组件方法名')
                   .native:修饰符
                   作用：能让组件标签使用原生的事件和方法
         -->
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" @click="submit">
          <div class="txt">{{ $t('login.login') }}</div>
        </el-button>
      </el-form-item>
      <p>帐号：13800000002 密码：123456</p>
    </el-form>
  </div>
</template>
<script>
// import { sysLogin } from '@/api/login'
export default {
  data() {
    return {
      form: {
        mobile: '13800000002', //	string	必须		手机号
        password: '123456' //	string	必须		密码
      },
      rules: {
        mobile: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            pattern:
              /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '请正确输入手机号',
            trigger: 'change'
          }
        ], //	string	必须		手机号
        password: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            min: 6,
            max: 12,
            message: '请输入6-12位密码',
            trigger: 'change'
          }
        ] //	string	必须		密码
      }
    }
  },
  methods: {
    // 登陆点击事件
    submit() {
      this.$refs.form.validate(async(result) => {
        // console.log(result)
        if (result) {
          // console.log(1)
          await this.$store.dispatch('user/toLogin', this.form)
          // console.log(2)
          this.$message.success('登陆成功')
          // 跳转到首页
          // setTimeout(() => {
          this.$router.push(this.$route.query.redirect || '/')
          // }, 2000)
          // const res = await sysLogin(this.form)
          // this.$store.commit('user/setToken', res.data)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
// vue-cli  4的版本style中不支持@，4支持~@代表src,5的是支持的@
.login {
  height: 100%;
  background-image: url('~@/assets/common/login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    width: 500px;
    text-align: center;
    .logo {
      margin-bottom: 20px;
    }
    .btn {
      width: 100%;
      padding: 20px 0;
    }
    .txt {
      font-size: 24px;
    }
    ::v-deep .el-input__inner {
      height: 60px;
    }
    ::v-deep .el-button--primary {
      background-color: #407ffe;
    }
    ::v-deep .el-form-item__error {
      color: #fff;
    }
  }
}
</style>
